<template>
	<div class="page">
		<div class="static-view c-panel">
			<div class="static-item" 
				v-for="(item, index) in statics">
				<div class="icon-bg" 
					:style="{'background-color': item.bgColor}">
					<img class="icon" :src="item.icon" />
				</div>
				<div class="info">
					<p class="count" v-text="item.count"></p>
					<p class="label" v-text="item.label"></p>
				</div>
			</div>
		</div>

		<div class="data-view c-panel">
			<Tabs value="name1">
				<TabPane label="最新动态" name="name1">
					<!-- the recent trend data -->
					<div class="c-m-panel c-p-trend-panel c-p-recent-panel">
						<h1 class="c-m-title">最新动态</h1>
						<div>
							<div class="c-p-trend-item" v-for="item in data.trends">
								<CTrendItem :data="item" />
							</div>
						</div>
					</div>
				</TabPane>
				<TabPane label="最新工作邀约" name="name2">
					<!-- the recent user offer data -->
					<div class="c-m-panel c-p-offer-panel c-p-recent-panel">
						<h1 class="c-m-title">最新工作邀约</h1>
						<div>
							<div class="c-p-offer-item" v-for="item in data.offers">
								<COfferItem :data="item" />
							</div>
						</div>
					</div>
				</TabPane>
				<TabPane label="最新档期" name="name3">
					<!-- the recent user schedule data -->
					<div class="c-m-panel c-p-schedule-panel c-p-recent-panel">
						<h1 class="c-m-title">最新档期</h1>
						<div>
							<div class="c-p-schedule-item" v-for="item in data.schedules">
								<CScheduleItem :data="item" />
							</div>
						</div>
					</div>
				</TabPane>
				<TabPane label="工作邀约" name="name4">
					<!-- the recent user schedule data -->
					<!--<div class="c-m-panel c-p-schedule-panel c-p-recent-panel">
							<h1 class="c-m-title">工作邀约</h1>
							<div>
								<div class="c-p-schedule-item" v-for="item in data.schedules">
									<CScheduleItem :data="item" />
								</div>
							</div>
						</div>-->
				</TabPane>
				<TabPane label="新用户注册" name="name5">
					<!-- the recent user schedule data -->
					<!--<div class="c-m-panel c-p-schedule-panel c-p-recent-panel">
							<h1 class="c-m-title">新用户注册</h1>
							<div>
								<div class="c-p-schedule-item" v-for="item in data.schedules">
									<CScheduleItem :data="item" />
								</div>
							</div>
						</div>-->
				</TabPane>
			</Tabs>

			<!--人员邀请-->
			<!--<div>
				<h1>工作邀约</h1>
				<div>

				</div>
			</div>-->
			<!-- 新用户注册 -->
			<!--<div>
				<h1>新用户注册</h1>
				<div>

				</div>
			</div>-->
		</div>
	</div>
</template>

<script>
	//trend item widget
	import CTrendItem from '@/components/CTrendItem.vue';
	//offer item widget
	import COfferItem from '@/components/COfferItem.vue';
	//schedule item widget 
	import CScheduleItem from '@/components/CScheduleItem.vue';

	import TrendService from '@/services/TrendService.js';
	var $trendService = TrendService();

	import OfferService from '@/services/OfferService.js';
	var $offerService = OfferService();

	import ScheduleService from '@/services/ScheduleService.js';
	var $scheduleService = ScheduleService();

	import StaticService from '@/services/StaticService.js';
	var $staticService = StaticService();
	export default {
		name: 'Home',
		data() {
			return {
				statics: [{
					icon: './static/user_c.png',
					bgColor: '#6CCAC9',
					count: 100,
					label: '注册用户'
				}, {
					icon: './static/user_c.png',
					bgColor: '#FF6C60',
					count: 100,
					label: '周增长用户'
				}, {
					icon: './static/works_c.png',
					bgColor: '#FF6C60',
					count: 100,
					label: '入库影片'
				}, {
					icon: './static/attribute_tag_c.png',
					bgColor: '#FCD348',
					count: 100,
					label: '属性标签'
				}, {
					icon: './static/entity_tag_c.png',
					bgColor: '#57C8F2',
					count: 100,
					label: '实体标签'
				}],
				data: { //最新数据
					trends: [], //the recent trends
					offers: [], // the recent offers
					schedules: []// the recent schedules
				},
				isTabPanelFixed: false,
				isShowBigImageTrue: true,
				isShowBigImageFalse: false
			}
		},
		mounted: function() { // when view mounted load data from server
			var $this = this;
			$trendService.getTrends(0, 10)
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					if(code == 100) { //load data success
						$this.data.trends = res.data;
					} else {
						$this.$Message.error(res.msg)
					}
				}, function(error) {
					console.log(error);
				});

			$offerService.getOffers(0, 10)
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					if(code == 100) { //load data success
						$this.data.offers = res.data;
					} else {
						$this.$Message.error(res.msg)
					}
				}, function(error) {
					console.log(error);
				});

			$scheduleService.getSchedules(0, 10)
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					if(code == 100) { //load data success
						$this.data.schedules = res.data;
					} else {
						$this.$Message.error(res.msg)
					}
				}, function(error) {
					console.log(error);
				});
			$staticService.getTotalCount2User()
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					if(code == 100) { //load data success
						$this.statics[0].count = res.data.count;
					} else {
						$this.$Message.error(res.msg)
					}
				}, function(error) {
					console.log(error);
				});

			$staticService.getWeekCount2User()
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					if(code == 100) { //load data success
						$this.statics[1].count = res.data.count;
					} else {
						$this.$Message.error(res.msg)
					}
				}, function(error) {
					console.log(error);
				});

			$staticService.getTotalCount2Works()
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					if(code == 100) { //load data success
						$this.statics[2].count = res.data.count;
					} else {
						$this.$Message.error(res.msg)
					}
				}, function(error) {
					console.log(error);
				});

			$staticService.getTotalCount2Atag()
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					if(code == 100) { //load data success
						$this.statics[3].count = res.data.count;
					} else {
						$this.$Message.error(res.msg)
					}
				}, function(error) {
					console.log(error);
				});

			$staticService.getTotalCount2Etag()
				.then(function(response) {
					var res = response.data;
					var code = res.rescode;
					if(code == 100) { //load data success
						$this.statics[4].count = res.data.count;
					} else {
						$this.$Message.error(res.msg)
					}
				}, function(error) {
					console.log(error);
				});
			this.$parent.$refs.main.addEventListener('scroll', this.menu);
		},
		watch: {
			'isTabPanelFixed': function(val, oldval) {
				if (val == true) {
					document.querySelector('.ivu-tabs-nav-scroll').style.position = 'fixed';
					document.querySelector('.ivu-tabs-nav-scroll').style.top = '60px';
					document.querySelector('.ivu-tabs-nav-scroll').style.zIndex = '9999';
					document.querySelector('.ivu-tabs-nav-scroll').style.backgroundColor = '#fff';
					document.querySelector('.ivu-tabs-nav-scroll').style.width = '100%';
					document.querySelector('.c-p-data-view').style.marginTop = '38px';
				} else {
					document.querySelector('.ivu-tabs-nav-scroll').style.position = '';
					document.querySelector('.c-p-data-view').style.marginTop = '0px';
				}
			}
		},
		methods: {
			menu() {
				if(this.$parent.$refs.main.scrollTop > 252) {
					this.isTabPanelFixed = true;
				} else {
					this.isTabPanelFixed = false;
				}
			},
			showBigImage(msg1, msg2) {
				this.isShowBigImageTrue = msg1;
				this.isShowBigImageFalse = msg2;
			}
		},
		components: {
			CTrendItem,
			COfferItem,
			CScheduleItem
		}
	}
</script>

<style>
	.page {
		overflow: auto;
	}
	
	.static-view {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		margin-bottom: 10px;
		align-items: center;
		-webkit-align-items: center;
	}
	
	.static-item {
		border: 1px solid #E1E7E9;
		border-radius: 5px;
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		margin-right: 30px;
		min-width: 350px;
		margin-bottom: 20px;
	}
	
	/*.static-item:nth-of-type(3) {
		margin-right: 0;
	}*/
	
	.static-item:last-of-type {
		margin-right: 0;
	}
	
	.icon-bg {
		border-radius: 5px 0px 0px 5px;
		padding: 25px;
	}
	
	.static-item .icon {
		display: block;
		width: 50px;
		height: 50px;
	}
	
	.static-item .count {
		font-size: 35px;
		color: #000000;
		opacity: 0.87;
		text-align: center;
		font-weight: 500;
		flex: 1;
	}
	
	.static-item .info {
		flex: 1;
		padding: 10px;
	}
	
	.static-item .label {
		color: #000000;
		opacity: 0.37;
		text-align: center;
		font-size: 16px;
	}
	
	.c-p-data-view {
		display: flex;
		flex-wrap: wrap;
		height: 100%;
	}
	
	
	.c-m-panel {}
	
	.c-p-recent-panel {
		width: 99%;
		margin: 0 auto;
		background: #F2F2F2;
	}
	
	.c-p-trend-panel {}
	
	.c-p-trend-item {
		margin-bottom: 10px;
	}
	
	.c-p-offer-panel {}
	
	.c-p-offer-item {
		margin-bottom: 10px;
	}
	
	.c-p-schedule-panel {}
	
	.c-p-schedule-item {
		margin-bottom: 10px;
	}
</style>